<template>
	<view class="container">
		<view class="qrcode-content">
			<view class="qrcode-box">
				<view class="user-info">
					<image class="avatar" :src="$wanlshop.oss(user.avatar, 80, 80, 2, 'avatar')" mode="aspectFill"></image>
					<view class="nickname">{{ user.nickname }}</view>
				</view>
				<view class="qrcode-image">
					<image v-if="qrCodeUrl" :src="qrCodeUrl" mode="aspectFit"></image>
					<view v-else class="loading">
						<text class="cuIcon-loading2 iconfont-spin"></text>
						<text>加载中...</text>
					</view>
				</view>
				<view class="tip">微信扫描二维码，注册成为我的下级</view>
			</view>
			
			<view class="action-buttons">
				<button class="cu-btn bg-green shadow" @tap="saveQrCode">保存到相册</button>
				<button class="cu-btn bg-blue shadow" @tap="shareQrCode">分享</button>
			</view>
			
			<view class="promotion-info">
				<view class="title">推广说明</view>
				<view class="content">
					<view class="item">1. 用户通过扫描您的推广码注册成功后，将成为您的下级</view>
					<view class="item">2. 您可以在"推广"页面查看所有直接下级用户</view>
					<view class="item">3. 推广成功可获得相应奖励，详情请查看平台规则</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	export default {
		data() {
			return {
				qrCodeUrl: ''
			}
		},
		computed: {
			...mapState(['user'])
		},
		onLoad() {
			// 直接使用用户数据中的qr_code字段
			if (this.user && this.user.qr_code) {
				this.qrCodeUrl = this.user.qr_code;
			}
		},
		onShow() {
			// 确保每次显示页面时都能获取最新的二维码
			if (this.user && this.user.qr_code) {
				this.qrCodeUrl = this.user.qr_code;
			} else {
				// 如果用户数据中没有二维码，尝试重新获取用户信息
				this.getUserInfo();
			}
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				uni.showLoading({
					title: '加载中'
				});
				
				uni.request({
					url: '/member/user/info',
					method: 'POST',
					success: res => {
						if (res.data && res.data.qr_code) {
							this.qrCodeUrl = res.data.qr_code;
							// 更新用户信息
							this.$store.commit('user/setUserInfo', res.data);
						} else {
							this.$wanlshop.msg('获取二维码失败');
						}
					},
					fail: () => {
						this.$wanlshop.msg('网络错误，请重试');
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			// 保存二维码到相册
			saveQrCode() {
				if (!this.qrCodeUrl) {
					this.$wanlshop.msg('二维码不存在，请重新登录');
					return;
				}
				
				uni.showLoading({
					title: '保存中'
				});
				
				// #ifdef APP-PLUS
				// 将网络图片保存到本地
				uni.downloadFile({
					url: this.qrCodeUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.hideLoading();
									this.$wanlshop.msg('保存成功');
								},
								fail: () => {
									uni.hideLoading();
									this.$wanlshop.msg('保存失败，请检查权限');
								}
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						this.$wanlshop.msg('下载失败');
					}
				});
				// #endif
				
				// #ifdef H5
				uni.hideLoading();
				this.$wanlshop.msg('请长按图片保存');
				// #endif
			},
			
			// 分享二维码
			shareQrCode() {
				if (!this.qrCodeUrl) {
					this.$wanlshop.msg('二维码不存在，请重新登录');
					return;
				}
				
				// #ifdef APP-PLUS
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: this.qrCodeUrl,
					title: '邀请您加入' + this.$store.state.common.appName,
					summary: `扫描${this.user.nickname}的推广码，注册成为会员`,
					success: (res) => {
						this.$wanlshop.msg('分享成功');
					},
					fail: (err) => {
						this.$wanlshop.msg('分享失败');
					}
				});
				// #endif
				
				// #ifdef H5
				this.$wanlshop.msg('H5环境请长按图片保存后分享');
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	
	.qrcode-content {
		padding: 30rpx;
	}
	
	.qrcode-box {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.user-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}
			
			.nickname {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.qrcode-image {
			width: 400rpx;
			height: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx 0;
			
			image {
				width: 100%;
				height: 100%;
			}
			
			.loading {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #999;
				
				.iconfont-spin {
					font-size: 60rpx;
					margin-bottom: 20rpx;
					animation: spin 1s linear infinite;
				}
				
				@keyframes spin {
					from { transform: rotate(0deg); }
					to { transform: rotate(360deg); }
				}
			}
		}
		
		.tip {
			font-size: 28rpx;
			color: #666;
			margin-top: 20rpx;
		}
	}
	
	.action-buttons {
		display: flex;
		justify-content: space-around;
		margin: 40rpx 0;
		
		.cu-btn {
			width: 240rpx;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}
	
	.promotion-info {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			border-left: 8rpx solid #4CBD66;
			padding-left: 20rpx;
		}
		
		.content {
			.item {
				font-size: 28rpx;
				color: #666;
				line-height: 1.8;
				margin-bottom: 10rpx;
			}
		}
	}
</style> 